Here are the modifications to address your requests.

1. CSS Adjustments

Replace the previous .edit-palette-grid, .edit-comment-grid, and related mobile media queries with these updated rules to ensure the palette is vertically centered and the comment grid remains strictly 2x2.

CSS

    /* --- Edit Mode UI Grid Styles --- */
   .edit-palette-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 5px;
       width: 100%;
       padding: 5px;
       box-sizing: border-box;
       /* Vertically center inside the flex container (.ejceesrecord) */
       margin-top: auto;
       margin-bottom: auto;
   }

   .edit-comment-grid {
       display: grid;
       /* Strictly 2x2 grid */
       grid-template-columns: repeat(2, 1fr);
       grid-template-rows: repeat(2, 1fr);
       justify-items: center;
       align-items: center;
       width: 100%;
       height: 100%;
       gap: 10px;
       padding: 10px;
       box-sizing: border-box;
   }

   .edit-palette-item {
       width: 100%;
       aspect-ratio: 1;
       cursor: pointer;
       box-sizing: border-box;
   }

   .edit-comment-item, .ejceespbmini-container {
       width: 100%;
       max-width: 64px;
       aspect-ratio: 1;
       cursor: pointer;
       box-sizing: border-box;
       display: flex;
       justify-content: center;
       align-items: center;
   }

   /* Mobile specific adjustments */
   @media (max-width: 767px) {
       .ejceescomment {
           display: flex;
           flex-direction: column;
           justify-content: center;
       }
       /* Note: Removed the min-aspect-ratio override so the 2x2 grid is always preserved */
   }

2. Global Prompt State Management (JavaScript)

Add a new function to manage the persistent (long-term) text prompts based on the current state of the application.

JavaScript

        // Function to determine and display the persistent status prompt
       function updatePersistentPrompt() {
           let promptText = "";

           if (isEditMode) {
               promptText = isTile0Selected
                   ? "Edit Mode: Select a piece to place or move."
                   : "Edit Mode: Select a piece to replace or delete.";
           }
           // NOTE: Replace 'isEditingComment' and 'isSelectingRange' with your actual state variable names
           else if (typeof isEditingComment !== 'undefined' && isEditingComment) {
               promptText = "Editing comment...";
           }
           else if (typeof isSelectingRange !== 'undefined' && isSelectingRange) {
               promptText = "Select a range of steps.";
           }
           else if (isPlaying) {
               promptText = "Auto-playing...";
           }

           // If there's an active state, show its persistent text. Otherwise, clear it.
           if (promptText) {
               setOutputText(promptText, false);
           } else {
               const outputEl = document.querySelector('.ejceesoutput');
               if (outputEl) outputEl.textContent = "";
           }
       }

3. Update restoreOutputText

Modify your existing restoreOutputText function so that when a short-term temporary message fades away, it reverts to the correct long-term persistent prompt instead of just clearing the text.

JavaScript

        function restoreOutputText() {
           // Revert to the persistent text for the current state
           updatePersistentPrompt();
       }

4. Update Event Bindings to Trigger the Prompt

You need to call updatePersistentPrompt() whenever a relevant state changes.

In bindEditUIEvents(), update the tile0 / tile1 toggle logic:

JavaScript

            document.querySelectorAll('.edit-comment-item').forEach(item => {
               item.addEventListener('click', () => {
                   const char = item.getAttribute('data-char');
                   if (char === 'tile0' || char === 'tile1') {
                       // ... [keep existing SVG update logic] ...
                       
                       isTile0Selected = !isTile0Selected;
                       updatePersistentPrompt(); // Update the base text based on selection mode
                       setOutputText("Option changed.", true); // Show short-term message
                   } else if (char === 'K' || char === 'k') {
                       // ... [keep existing King logic] ...
                   }
                   updateEditUI();
               });
           });

In enterEditMode():

Find the line setOutputText("Edit Mode: Select a piece to place or move.", false); and replace it with:

JavaScript

            updatePersistentPrompt();

Other necessary placements (Action Required):

You will also need to call updatePersistentPrompt(); inside the functions that handle entering/exiting your other states. For example:

• Inside your togglePlay() function (when isPlaying changes).
• Inside your function that triggers comment editing mode.
• Inside your function that triggers range selection mode.
• Inside exitEditModeCancel() and exitEditModeConfirm().